<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="35%"
    destroy-on-close
  >
    <div class="form-box" style="max-height: 500px; overflow-y: auto">
      <el-descriptions :column="1">
        <el-descriptions-item label="数据源名称">
          {{ dialogForm.dataSourceName || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="数据源描述">
          {{ dialogForm.dataSourceDescription || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="数据源类型">
          {{ sourceType }}
        </el-descriptions-item>
        <el-descriptions-item label="IP/主机名">
          {{ dialogForm.dataSourceIp || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="端口号">
          {{ dialogForm.dataSourcePort || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="数据库名">
          {{ dialogForm.dataBaseName || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="模式名">
          {{ dialogForm.schemaName || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="用户名">
          {{ dialogForm.userName || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="密码">
          {{ dialogForm.password || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="连接地址">
          {{ dialogForm.dataBaseAddress || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="子系统">
          {{ tenant }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "DetailDialog",
  props: {
    dataSourceTypes: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 子系统
      tenants: [],
      dialogTitle: "数据源详情",
      dialogVisible: false,
      dialogForm: {
        dataSourceName: null,
        dataSourceDescription: null,
        dataSourceTypeId: null,
        dataSourceIp: null,
        dataSourcePort: null,
        dataBaseName: null,
        schemaName: null,
        userName: null,
        password: null,
        dataBaseAddress: null,
        tenantId: null,
      },
    };
  },
  computed: {
    sourceType() {
      const tmp = this.dataSourceTypes.find(
        (ele) => ele.value === this.dialogForm.dataSourceTypeId
      );
      return tmp ? tmp.label : "---";
    },
    tenant() {
      const tmp = this.tenants.find(
        (ele) => ele.value === this.dialogForm.tenantId
      );
      return tmp ? tmp.label : "---";
    },
  },
  methods: {
    // 打开弹窗
    openDialog(row) {
      // 请求子系统数据
      this.getTenantList();
      this.dialogForm = row;
      this.makeAddress();
      this.dialogVisible = true;
    },
    // 获取子系统列表
    getTenantList() {
      this.$axios
        .get(this.$api.dataConnection.dataSource.getTenantList, {
          params: { pageSize: 100 },
        })
        .then((res) => {
          const data = res.data.data;
          if (Array.isArray(data.records)) {
            this.tenants = data.records.map((item) => {
              item.label = item.name;
              item.value = item.id;
              return item;
            });
          }
        });
    },
    // 处理连接地址
    makeAddress() {
      const sourceType = this.dataSourceTypes.find(
        (ele) => ele.value === this.dialogForm.dataSourceTypeId
      );
      const sourceTypeName = sourceType ? sourceType.label : "";
      this.dialogForm.dataBaseAddress = `${
        this.dialogForm.access ? this.dialogForm.access + ":" : ""
      }${sourceTypeName}://${this.dialogForm.dataSourceIp || ""}:${
        this.dialogForm.dataSourcePort || ""
      }/${this.dialogForm.dataBaseName || ""}${
        this.dialogForm.extra ? "?" + this.dialogForm.extra : ""
      }`;
    },
  },
};
</script>
<style scoped lang="scss"></style>
